<template>
  <el-card style="width: 500px"  class="loginBox">
    <div class="clearfix" style="text-align:center">
      <h2>命运回弹</h2>
    </div>
    <el-input class="inp" v-model="data.username" placeholder="Please enter username" />
    <el-input class="inp" type="password" v-model="data.password" placeholder="Please enter password" />
    <el-button style="width: 50%;margin-top:40px; height: 40px;" type="primary" @click="doLogin">登录</el-button>
  </el-card>


</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { userLogin } from '../api/api';
import { ElMessage } from 'element-plus'
// const input = ref('')
// const password = ref('')
const data = ref({
  username: '',
  password: ''
})
const router = useRouter();

const doLogin =  () => {
  try {
    console.log('data', data)
    // 这里应该是发送登录请求的代码，例如使用axios或者其他HTTP客户端
    userLogin(data.value).then((res) => {
     
      ElMessage({
        message: '登录成功',
        type: 'success',
      })
       console.log('res', res.data.menus)
      localStorage.setItem("Token", res.data.token);
      localStorage.setItem("menus", JSON.stringify(res.data.menus));
      localStorage.setItem("power", JSON.stringify(res.data.power));
      localStorage.setItem("user", JSON.stringify(res.data.user));
      router.push('/'); // 成功后重定向到主页

    })
    // 假设登录成功后，我们将用户重定向到主页
    // 登录请求的代码放这里
    console.log('Login successful');

  } catch (error) {
    // 处理登录失败的情况
    console.error('Login failed', error);
    // 可以在这里提示用户登录失败的信息
  }
};

</script>
<style>
.loginBox {
  width: 450px;
  margin: auto;
  margin-top: 300px;
  padding: 50px;
}

.inp {
  width: 400px;
  height: 50px;
  margin-top: 30px;

}
</style>